<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="styles/style.css">
<head>
    <meta charset="UTF-8">
    <title>flex</title>
</head>
<body>
<div class="page">
    <header class="top">
        <div class="top-title">
            <img class="top_img" src="imgs/back.svg">
            <p class="top_text">计算机榜</p>
            <img class="top_img" src="imgs/share.svg">
        </div>
        <div class="find">
            <img class="find_img" src="imgs/search.svg">
            <input class="find_text" type="text" placeholder="搜索">
        </div>
        <div class="tabs tabs-top">
            <ul class="tab_list">
                <li class="tab-item tab-item-hot">全部</li>
                <li class="tab-item">办公软件</li>
                <li class="tab-item">编程设计</li>
                <li class="tab-item tabs-long " >计算机综合</li>
            </ul>
        </div>
        <div class="tabs tab-botton">
            <ul class="tab_list">
                <li class="tab-item">理论知识</li>
                <li class="tab-item">人工智能</li>
                <li class="tab-item">数据库</li>
                <li class="tab-item tabs-long">图像视频</li>
            </ul>
        </div>
    </header>
    <main class="list">
        <div class="book">
            <div class="book-num">1</div>
            <div class="book-cover"><img class="reading-img" src="https://wfqqreader-1252317822.image.myqcloud.com/cover/930/22806930/t7_22806930.jpg"></div>
            <div class="book-intro">
                <div class="book-title">Python编程：从入门到实践</div>
                <div class="book-author">埃里克·马瑟斯</div>
                <div class="book-rating"> <div class="num" >推荐值86.3%</div><img class="img-hprc" src="imgs/hprc.svg"></div>

            </div>
            <div class="reading">
                <img class="readingcountimg" src="imgs/people.svg">
                <div class="readingcount">746</div>
            </div>
        </div>
        <div class="book">
            <div class="book-num">2</div>
            <div class="book-cover"><img class="reading-img" src="https://wfqqreader-1252317822.image.myqcloud.com/cover/683/34336683/t7_34336683.jpg"></div>
            <div class="book-intro">
                <div class="book-title">JavaScript高级程序设计（第4版）</div>
                <div class="book-author">马特·弗里斯比</div>
                <div class="book-rating">推荐值86.7%</div>
            </div>
            <div class="reading">
                <img class="readingcountimg" src="imgs/people.svg">
                <div class="readingcount">329</div>
            </div>
        </div>
        <div class="book">
        <div class="book-num">3</div>
        <div class="book-cover"><img class="reading-img" src="https://wfqqreader-1252317822.image.myqcloud.com/cover/755/907755/t7_907755.jpg"></div>
        <div class="book-intro">
            <div class="book-title">网络是怎样连接的</div>
            <div class="book-author">户根勤</div>
            <div class="book-rating"><div class="num" >推荐值82.8%</div><img class="img-hprc" src="imgs/kzrk.svg"></div>
        </div>
        <div class="reading">
            <img class="readingcountimg" src="imgs/people.svg">
            <div class="readingcount">319</div>
        </div>
    </div>
        <div class="book">
            <div class="book-num">4</div>
            <div class="book-cover"><img class="reading-img" src="https://wfqqreader-1252317822.image.myqcloud.com/cover/184/30179184/t7_30179184.jpg"></div>
            <div class="book-intro">
                <div class="book-title">操作系统导论</div>
                <div class="book-author">雷姆兹·H.阿帕希杜塞尔 安德莉亚·C.阿帕希杜塞尔</div>
                <div class="book-rating">推荐值91.3%</div>
            </div>
            <div class="reading">
                <img class="readingcountimg" src="imgs/people.svg">
                <div class="readingcount">292</div>
            </div>
        </div>
        <div class="book">
            <div class="book-num">5</div>
            <div class="book-cover"><img class="reading-img" src="https://wfqqreader-1252317822.image.myqcloud.com/cover/196/33692196/t7_33692196.jpg"></div>
            <div class="book-intro">
                <div class="book-title">C++ Primer（中文版）（第5版）</div>
                <div class="book-author">Stanley B·Lippman Josée Lajoie Barbara E·Moo</div>
                <div class="book-rating">推荐值86.4%</div>
            </div>
            <div class="reading">
                <img class="readingcountimg" src="imgs/people.svg">
                <div class="readingcount">264</div>
            </div>
        </div>
        <div class="book">
            <div class="book-num">6</div>
            <div class="book-cover"><img class="reading-img" src="https://wfqqreader-1252317822.image.myqcloud.com/cover/681/34336681/t7_34336681.jpg"></div>
            <div class="book-intro">
                <div class="book-title">Python编程：从入门到实践（第2版）</div>
                <div class="book-author">埃里克·马瑟斯</div>
                <div class="book-rating">推荐值67.2%</div>
            </div>
            <div class="reading">
                <img class="readingcountimg" src="imgs/people.svg">
                <div class="readingcount">252</div>
            </div>
        </div>
        <div class="book">
            <div class="book-num">7</div>
            <div class="book-cover"><img class="reading-img" src="https://wfqqreader-1252317822.image.myqcloud.com/cover/0/622000/t7_622000.jpg"></div>
            <div class="book-intro">
                <div class="book-title">Redis设计与实现</div>
                <div class="book-author">黄健宏</div>
                <div class="book-rating"><div class="num" >推荐值85.4%</div><img class="img-hprc" src="imgs/hprc.svg"></div>
            </div>
            <div class="reading">
                <img class="readingcountimg" src="imgs/people.svg">
                <div class="readingcount">237</div>
            </div>
        </div>
        <div class="book">
            <div class="book-num">8</div>
            <div class="book-cover"><img class="reading-img" src="https://wfqqreader-1252317822.image.myqcloud.com/cover/916/22806916/t7_22806916.jpg"></div>
            <div class="book-intro">
                <div class="book-title">算法图解</div>
                <div class="book-author">巴尔加瓦</div>
                <div class="book-rating"><div class="num" >推荐值79.6%</div><img class="img-hprc" src="imgs/kzrk.svg"></div>
            </div>
            <div class="reading">
                <img class="readingcountimg" src="imgs/people.svg">
                <div class="readingcount">215</div>
            </div>
        </div>
        <div class="book">
        <div class="book-num">9</div>
        <div class="book-cover"><img class="reading-img" src="https://wfqqreader-1252317822.image.myqcloud.com/cover/9/33381009/t7_33381009.jpg"></div>
        <div class="book-intro">
            <div class="book-title">编码：隐匿在计算机软硬件背后的语言</div>
            <div class="book-author">查尔斯·佩措尔德</div>
            <div class="book-rating">推荐值89.8%</div>
        </div>
        <div class="reading">
            <img class="readingcountimg" src="imgs/people.svg">
            <div class="readingcount">208</div>
        </div>
    </div>
        <div class="book">
            <div class="book-num">10</div>
            <div class="book-cover"><img class="reading-img" src="https://wfqqreader-1252317822.image.myqcloud.com/cover/930/22806930/t7_22806930.jpg"></div>
            <div class="book-intro">
                <div class="book-title">利用Python进行数据分析（原书第2版）</div>
                <div class="book-author">韦斯·麦金尼</div>
                <div class="book-rating"><div class="num" >推荐值84.5%</div><img class="img-hprc" src="imgs/zdyd.svg"></div>
            </div>
            <div class="reading">
                <img class="readingcountimg" src="imgs/people.svg">
                <div class="readingcount">189</div>
            </div>
        </div>
    </main>
</div>
</body>
</html>